<template>
  <div class="dashboard-container">
   <!-- <div class="dashboard-text">name: {{ name }}</div>
    <div class="dashboard-text">roles: <span v-for="role in roles" :key="role">{{ role }}</span></div> -->
		<div class="dashboard-top-wrapper">
			<div class="top">
				<div class="item">
					<div class="header-wrapper">
						<span>License总数</span>
					</div>
					<div class="count">
						{{license_num.total}}
					</div>
				</div>
				<div class="item">
					<div class="header-wrapper">
						<span>License可用数</span>
						<span class="warning" v-if="license_num.available<=5000">低库存警告</span>
					</div>
					<div class="count" :class="{'warning':license_num.available<=5000}">
						{{license_num.available}}
					</div>
				</div>
				<div class="item">
					<div class="header-wrapper">
						<span>License无效数</span>
					</div>
					<div class="count">
						{{license_num.invalid}}
					</div>
				</div>
			</div>
		</div>
		<div class="dashboard-bottom-wrapper">
			 <el-table
		  	   border
			  :data="tableData"
			  style="width: 100%">
			  <el-table-column
			    prop="serial"
				label="序号"
				show-overflow-tooltip
				width="80">
			  </el-table-column>
			  <el-table-column
				show-overflow-tooltip
				prop="sn"
				label="SN"
				min-width="100"
				>
			  </el-table-column>
			  <el-table-column
				show-overflow-tooltip
				prop="uid"
				label="UID"
				min-width="180"
				>
			  </el-table-column>
			  <el-table-column
				prop="status"
				label="状态"
				min-width="80">
			  </el-table-column>
			  <el-table-column
				label="生成日期"
				show-overflow-tooltip
				min-width="110">
				 <template slot-scope="scope">
					{{scope.row.createTime | formatDate}}
				  </template>
			  </el-table-column>
			  <el-table-column
				label="出货日期"
				show-overflow-tooltip
				min-width="110">
				<template slot-scope="scope">
					{{scope.row.shippingDate | formatDate}}
				 </template>
			  </el-table-column>
			  <el-table-column
				prop="saleMan"
				label="销售人员"
				show-overflow-tooltip
				min-width="100">
			  </el-table-column>
			  <el-table-column
				label="使用日期"
				show-overflow-tooltip
				min-width="110">
				<template slot-scope="scope">
					{{scope.row.userTime | formatDate}}
				 </template>
			  </el-table-column>
			  <el-table-column
				prop="customer"
				label="客户编码"
				min-width="100"
				show-overflow-tooltip
				>
			  </el-table-column>
			  <el-table-column
				prop="user"
				label="使用人"
				show-overflow-tooltip
				min-width="100"
				>
			  </el-table-column>
			</el-table>
			<div class="pagination">
				<pagination
				  v-show="total>0"
				  :total="total"
				  :page.sync="queryParams.pageNum"
				  :limit.sync="queryParams.pageSize"
				  @pagination="handleGetList"
				/>
			</div>
		</div>
		
  </div>
</template>

<script>
import { getList, getAdminList } from "@/api/dashboard";
import { mapGetters } from 'vuex';

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters(['license_num'])
  },
  data(){
		return{
		  lincenseStatistics:{
			  total:0, 		//License总数
			  available:0,		//License可用数
			  invalid:0			//License无效数
		  },
		  tableData:[],
			// 总条数
			total: 0,
			// 查询参数
			queryParams: {
			  pageNum: 1,
			  pageSize: 10,
			},
	  }
	},
	created() {
	this.handleGetTotalKey()
	this.handleGetList()	
	},
	methods: {
		async handleGetTotalKey() {
		  const roles = await this.$store.state.user.roles[0]
		  this.$store.dispatch('common/getLicense',roles).then(() => {
		  }).catch(() => {
			  console.log("出错");
		  })
		},
		/** 查询首页列表 */
		handleGetList() {
		  let userRole =this.$store.state.user.roles[0]
		  this.loading = true;
		  if (userRole == 'admin' || userRole == 'hichs') {
		  	getAdminList(this.queryParams).then(response => {
			  let { rows, total} = response;
			  this.total = total;
			  this.tableData = rows;
		  	  this.loading = false;
		  	});
		  } else{
		  	getList(this.queryParams).then(response => {
			  let { rows, total} = response;
			  this.total = total;
			  this.tableData = rows;
		  	  this.loading = false;
		  	});
		  }
		  
		  
		}
	}
}
</script>

<style lang="scss" scoped>
.warning{
	color: #DC2626 !important;
}
.dashboard {
	padding: 20px;
	&-top-wrapper {
    .top{
		display: flex;
		justify-content: space-between;
		.item{
			width: calc(33.33% - 15px);
			height: 120px;
			background-color: #fff;
			box-shadow: 0 2px 10px 5px #eee;
			border-radius: 5px;
			padding: 15px;
			.header-wrapper{
				display: flex;
				justify-content: space-between;
				color: #4D5664;
				font-size: 14px;
			}
			.count{
				font-size: 48px;
				text-align: center;
				color: #4B5563;
				padding: 10px 0;
			}
		}
	}
  }
  &-bottom-wrapper {
	margin-top: 20px;
	padding: 20px 20px 0;
	background-color: #fff;
	box-shadow: 0 2px 10px 5px #eee;
  }
}
</style>
